.viil-bezel {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  font-size: 22px;
  color: #fff;
  pointer-events: none;
  .viil-bezel-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -26px 0 0 -26px;
    height: 52px;
    width: 52px;
    padding: 12px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, .5);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    &.viil-bezel-transition {
      animation: bezel-hide .5s linear;
    }
    @keyframes bezel-hide {
      from {
        opacity: 1;
        transform: scale(1);
      }
      to {
        opacity: 0;
        transform: scale(2);
      }
    }
  }
  .viil-danloading {
    position: absolute;
    top: 50%;
    margin-top: -7px;
    width: 100%;
    text-align: center;
    font-size: 14px;
    line-height: 14px;
    animation: my-face 5s infinite ease-in-out;
  }
  .viil-loading-icon {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -18px 0 0 -18px;
    height: 36px;
    width: 36px;
    pointer-events: none;
    .viil-loading-hide {
      display: none;
    }
    .viil-loading-dot {
      animation: viil-loading-dot-fade .8s ease infinite;
      opacity: 0;
      transform-origin: 4px 4px;
      @for $i from 7 through 1 {
        &.viil-loading-dot-#{$i} {
          animation-delay: .1s * $i;
        }
      }
    }
    @keyframes viil-loading-dot-fade {
      0% {
        opacity: .7;
        transform: scale(1.2, 1.2)
      }
      50% {
        opacity: .25;
        transform: scale(.9, .9)
      }
      to {
        opacity: .25;
        transform: scale(.85, .85)
      }
    }
  }
}
